<template>
  <div class="container">
    <TopCom :isShow="isShow" />
    <div class="main">
      <div class="title">你正在浏览{{ searchWeatherData.city }}的天气信息</div>
      <div class="search-weather">
        <p>当日气温是：{{ searchWeatherData.temperature }}摄氏度</p>
        <p>当日天气是：{{ searchWeatherData.weather }}</p>
        <p>当日风向是：{{ searchWeatherData.winddirection }}风</p>
        <p>当日风力是：{{ searchWeatherData.windpower }}级</p>
      </div>
      <hr />
      <div class="box">
        <div class="charts">
          <div class="top">
            <div v-for="weather in searchWeatherArr" :key="weather.id">
              <span>{{ weather.week }}</span>
              <span>{{ weather.date }}</span>
              <span>{{ weather.weather }}</span>
              <span>{{ weather.power }}</span>
            </div>
          </div>
          <div class="chart">
            <v-chart :option="searchCharts"></v-chart>
          </div>
        </div>
      </div>
    </div>
    <AboutCom />
  </div>
</template>

<script setup>
import TopCom from '@/components/TopCom.vue'
import AboutCom from '@/components/AboutCom.vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useWeatherStore } from '@/strores/useWeatherStore'
import { storeToRefs } from 'pinia'

const weather = useWeatherStore()
const { getSearchWeather } = weather
const { searchCharts, searchWeatherArr, searchWeatherData,isShow } = storeToRefs(weather)

const route = useRoute()

const city = route.params.city
const data = ref([])
onMounted(async () => {
  getSearchWeather(city)
  data.value = JSON.parse(localStorage.getItem('data'))
  console.log(typeof data.value)
  if (data.value==null) {
    isShow.value = true
  } else {
    isShow.value = !data.value.some((item) => item.city === city)
  }

  console.log('city', searchWeatherData)
})
</script>

<style lang="scss" scoped>
.main {
  // padding-right: 10rem;
  // padding-left: 10rem;
  padding: 0;
  .title {
    padding: 0.5rem;
    text-align: center;
    background-color: rgb(0 78 113);
  }
  .search-weather {
    margin-top: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  hr {
    margin-top: 1.5rem;
    border-color: rgb(255 255 255);
  }
  .box {
    margin-top: 0.5rem;
    padding-left: 13rem;
    padding-right: 13rem;
    .charts {
      padding-top: 2.5rem;
      background-color: rgb(0 78 113);
      .top {
        display: flex;
        gap: 1.5rem;
        div {
          flex: 1 1 0%;
          display: flex;
          flex-direction: column;
          gap: 1rem;
          text-align: center;
        }
      }
      .chart {
        margin-top: 2.5rem;
        height: 10rem;
        user-select: none;
      }
    }
  }
}
</style>
